<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2009年摩斯密码五层解密</title>
  <style>
    .box{
      margin: 45px auto;
      width: 300px;
      height: 580px;
      background-color: #f0f0f0;
    }
    .box>span{
      display: block;
      padding-top:30px;
      height: 80px;
      text-align: center;
    }
    input{
      margin-left: 25px;
      width: 230px;
      height:25px;
      border:none;
      border-bottom:1px solid black;
    }
    input:focus,#jie:focus{
      outline: none;
    }
    #jie{
      margin-left: 15px;
      width: 270px;
      height: 130px;
      resize:none;
    }
    button{
      width: 100px;
      height: 35px;
      background-color: #fff;
      border:2px solid #dadada;
      border-radius:5px;
      font:600 16px '微软雅黑';
    }
    button:hover{
      background-color:#dadada;
    }
    .jia{
      margin:10px 30px;
    }
    ol{
      margin: 0;
      padding-left:30px;
      padding-top:10px;
    }
    ol li{
        margin-bottom:10px;
    }
  </style>
</head>
<body>
    <div class="box">
        <span>我破译了你的摩斯密码<br>我们的♥约会♥还作数嘛</span>
        <input type="text" id="jia" value="ILOVEYOUTOO"><br>
        <button class="jia">加密</button>
        <button class="jie">解密</button>
        <textarea id="jie"></textarea>
        <br>
          <ol type="1">
            <b style="color: red;">注意:</b>
            <li>字母可区分大小写</li>
            <li>摩斯密码解密仅限0-9,不包含字母A-Z</li>
            <li>输入摩斯密码进行解密需两个或两个以上并用‘/’隔开</li>
            <li>输入摩斯密码要遵循手机九宫格规则</li>
            <li>解密流程：摩斯密码→手机九宫格→电脑键盘替换字母表→栅栏解密</li>
          </ol>
    </div>
      <script>
         //把键盘表和26个字母依次对应写成字符串并转数组
          //不嫌麻烦也可以直接写成数组 
          let JP = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('')
          let ZM = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
          //创建一个手机九宫格里的数字所对应字母数组
          let JGG = 
                [['A','B','C'],['D','E','F'],['G','H','I'],
                ['J','K','L'],['M','N','O'],['P','Q','R','S'],
                ['T','U','V'],['W','X','Y','Z']
                ]
           //0-9的摩斯密码对应写在数组里
         const MS = ('-----/.----/..---/...--/....-/...../-..../--.../---../----.').split('/') 
          
         //封装加密
        function JIA(str){
          //先把字符转换为数组并反转
          let arr = str.toUpperCase().split('').reverse() //O O T U O Y E V O L I
          //栅栏是分2排 想获得第一排就是索引不为偶数 第二排的索引则是为偶数
          // O T O E O I
          // O U Y V L
          let arr1 = arr.filter((item,index)=>index%2!==0)
          arr = arr.filter((item,index)=>index%2===0)
          //将得到的第一排和第二排进行组合
         let newArr = arr.concat(arr1) 
          // console.log(newArr)

          //字母表对应的电脑键盘表进行转换
          let ZmDn = newArr.map(item=>{
            //通过indexof来找到对应的索引并返回
            return JP[ZM.indexOf(item)]
          })
           //把字母转换为手机9宫格键盘上第几个格子的第几个字母的数字
          let SZ = []
         for(let i of ZmDn){
          for(let j=0;j<JGG.length;j++){
            for(let k=0;k<JGG[j].length;k++){
              if(i===JGG[j][k]){
                SZ.push(j+2,k+1)
              }
            }
          }
         }     
         //查找SZ值与摩斯密码索引相同
         const MS1 = SZ.map((item)=>MS[item]).join('/')
         return MS1
        }

        //封装解密
        function JIE(str){
          const SZ = str.split('/')
          //获取摩斯密码所对应的索引值
          const SZ1 = SZ.map(item=>{
            return MS.indexOf(item)
          })

          //获取九宫格上的字母
          const jiu1 = SZ1.filter((item,index)=>index%2===0).map(item=>item-2)
          const jiu2 = SZ1.filter((item,index)=>index%2!==0).map(item=>item-1)
          const zm = jiu2.map((item,index)=>jiu1.map((item)=>JGG[item])[index][item])
  
          //找到字母在电脑键盘的位置并获取26字母的位置所对应的字母
          const jp = zm.map(item=>{
           return ZM[JP.indexOf(item)]
          })

          // 把字母分成两排 两个数组
          const z1 = jp.filter((item,index)=>index<=jp.length/2)
          const z2 = jp.filter((item,index)=>index>jp.length/2&&index<jp.length)

          //最后解密栅栏密码 
            const str1 = z1.map((item,index)=>{
               return z2[index]? z1[index].concat(z2[index]) : z1[index].concat([])
            }).join('').split('').reverse('').join('')
            return str1
        }

        //获取文本和按钮
        const input = document.querySelector('#jia')
        const txt = document.querySelector('#jie')
        const btn1 = document.querySelector('.jia')
        const btn2 = document.querySelector('.jie')
        //加密按钮
        btn1.addEventListener('click',()=>{
         txt.value = JIA((input.value))
         input.value = ''
        })
        // 解密按钮
        btn2.addEventListener('click',()=>{
         input.value = JIE(txt.value)
         txt.value = ''
        })
      </script>
</body>
</html>